<!--
  外协单位列表管理页面组件
  功能：显示外协单位列表，提供查询、新增、编辑、删除等操作
  作者：TMS系统开发团队
  创建时间：2024年
  注意：此页面虽然标题显示"车辆管理"，但实际功能是外协单位管理
-->

<template>
    <!-- 页面主容器 -->
    <div class="page">
        <!-- 页面标题 -->
        <div class="title">外协单位管理</div>

        <!-- 工具栏区域 -->
        <div class="toolbar">
            <!-- 查询条件表单行 -->
            <div class="form-row">
                <!-- 单位名称查询条件 -->
                <label>单位名称：</label>
                <input v-model="inputFilters.unitName" placeholder="请输入单位名称" />

                <!-- 手机号查询条件 -->
                <label>手机号：</label>
                <input v-model="inputFilters.phoneNumber" placeholder="请输入手机号" />

                <!-- 创建人查询条件 -->
                <label>创建人：</label>
                <input v-model="inputFilters.createdBy" placeholder="请输入创建人" />

                <!-- 地址查询条件 -->
                <label>地址：</label>
                <input v-model="inputFilters.address" placeholder="请输入地址" />

                <!-- 查询和重置按钮 -->
                <button class="primary" @click="query">查询</button>
                <button class="ghost" @click="reset">重置</button>
            </div>

            <!-- 操作按钮行 -->
            <div class="btn-row">
                <!-- 新增按钮 -->
                <button class="success" @click="addNew">新增</button>
                <!-- 批量删除按钮（只有选中数据时才可用） -->
                <button class="danger" :disabled="selectedIds.length === 0" @click="batchDelete">删除</button>
            </div>
        </div>

        <!-- 表格容器 -->
        <div class="table-wrap">
            <!-- 数据表格 -->
            <table class="table">
                <!-- 表头 -->
                <thead>
                    <tr>
                        <!-- 全选复选框 -->
                        <th style="width:48px"><input type="checkbox" :checked="isAllChecked"
                                @change="toggleSelectAll" /></th>
                        <!-- 表格列标题 -->
                        <th>单位名称</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                        <th>座机电话</th>
                        <th>地址</th>
                        <th>创建人</th>
                        <th>备注</th>
                        <!-- 操作列 -->
                        <th style="width:160px">操作</th>
                    </tr>
                </thead>
                <!-- 表格数据行 -->
                <tbody>
                    <!-- 遍历显示数据行 -->
                    <tr v-for="row in pageRows" :key="row.id">
                        <!-- 行选择复选框 -->
                        <td><input type="checkbox" :checked="selectedIds.includes(row.id)"
                                @change="e => toggleRow(row.id, e)" /></td>
                        <!-- 数据列显示 -->
                        <td>{{ row.unitName }}</td>
                        <td>{{ row.phoneNumber }}</td>
                        <td>{{ row.email }}</td>
                        <td>{{ row.landlinePhone }}</td>
                        <td>{{ row.address }}</td>
                        <td>{{ row.createdBy }}</td>
                        <td>{{ row.remarks }}</td>
                        <!-- 操作列 -->
                        <td class="op">
                            <a href="javascript:void(0)" @click="editRow(row)">编辑</a>
                            <span class="sep">|</span>
                            <a href="javascript:void(0)" @click="deleteRow(row)">删除</a>
                            <span class="sep">|</span>
                            <a href="javascript:void(0)" @click="viewRow(row)">查看</a>
                        </td>
                    </tr>
                    <!-- 无数据时的提示行 -->
                    <tr v-if="pageRows.length === 0">
                        <td class="empty" colspan="8">暂无数据</td>
                    </tr>
                </tbody>
            </table>
            <!-- 分页器 -->
            <div class="pager">
                <!-- 分页信息显示 -->
                <span>共<span class="strong">{{ Math.ceil(total / pageSize) }}</span>页/{{ total }}条数据</span>
                <!-- 分页按钮组 -->
                <div class="pager-right">
                    <!-- 上一页按钮 -->
                    <button :disabled="currentPage === 1" @click="currentPage = Math.max(1, currentPage - 1)">«</button>
                    <!-- 页码按钮 -->
                    <button v-for="n in Math.min(5, Math.ceil(total / pageSize))" :key="n"
                        :class="{ active: currentPage === n }" @click="currentPage = n">{{ n }}</button>
                    <!-- 下一页按钮 -->
                    <button :disabled="currentPage >= Math.ceil(total / pageSize)"
                        @click="currentPage = Math.min(Math.ceil(total / pageSize), currentPage + 1)">»</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="showDetail" class="modal-mask">
        <div class="modal">
            <div class="modal-header">
                <div>外协单位详情</div>
                <button class="modal-close" @click="closeDetail">×</button>
            </div>
            <div class="modal-body">
                <div v-if="detailLoading" class="loading">加载中...</div>
                <div v-else-if="!detail">无数据</div>
                <div v-else-if="detail.error" class="error-container">
                    <div class="error-icon">⚠️</div>
                    <div class="error-title">无法获取详情信息</div>
                    <div class="error-message">{{ detail.error }}</div>
                    <div v-if="detail.errorCode" class="error-code">错误代码: {{ detail.errorCode }}</div>
                    <div v-if="detail.suggestion" class="error-suggestion">{{ detail.suggestion }}</div>
                </div>
                <div v-else>
                    <div class="detail-row"><span class="label">单位名称：</span><span>{{ detail.unitName }}</span></div>
                    <div class="detail-row"><span class="label">手机号：</span><span>{{ detail.phoneNumber }}</span></div>
                    <div class="detail-row"><span class="label">邮箱：</span><span>{{ detail.email }}</span></div>
                    <div class="detail-row"><span class="label">座机电话：</span><span>{{ detail.landlinePhone }}</span>
                    </div>
                    <div class="detail-row"><span class="label">地址：</span><span>{{ detail.address }}</span></div>
                    <div class="detail-row"><span class="label">备注：</span><span>{{ detail.remarks }}</span></div>
                    <div class="detail-row"><span class="label">创建人：</span><span>{{ detail.createdBy }}</span></div>
                    <div class="detail-row"><span class="label">创建时间：</span><span>{{ detail.createdAt }}</span></div>
                    <div class="detail-row"><span class="label">最后修改人：</span><span>{{ detail.lastModifiedBy ?? '-'
                            }}</span></div>
                    <div class="detail-row"><span class="label">最后修改时间：</span><span>{{ detail.lastModifiedAt }}</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="primary" @click="closeDetail">确定</button>
            </div>
        </div>
    </div>

</template>



<script setup lang="ts">
import { reactive, ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { read, write } from '@/assets/Axios/axiosHttple'

/**
 * 外协单位行数据模型接口
 * 定义了外协单位列表显示的所有字段
 */
type ExternalUnitRow = {
    id: number                    // 唯一标识
    unitName: string             // 单位名称
    phoneNumber: string          // 手机号
    email: string               // 邮箱
    landlinePhone: string       // 座机电话
    address: string             // 地址
    createdBy: string           // 创建人
    remarks: string             // 备注
}

// 查询条件（提交后生效）
const filters = reactive({
    unitName: '',
    phoneNumber: '',
    createdBy: '',
    address: ''
})

// 输入框临时值（未点击查询前不生效）
const inputFilters = reactive({
    unitName: '',
    phoneNumber: '',
    createdBy: '',
    address: ''
})

// 所有数据行存储（当前页数据）
const allRows = ref<ExternalUnitRow[]>([])
// 路由实例
const router = useRouter()

/**
 * 获取外协单位列表（使用 External 服务端接口，兼容多种返回结构）
 */
async function fetchList() {
    // 固定使用 External 5049 接口
    const qs = new URLSearchParams({ PageIndex: String(currentPage.value), PageSize: String(pageSize.value) })
    try {
        const res = await read.get('baseinforead/api/External/GetExternalList', { params: { PageIndex: currentPage.value, PageSize: pageSize.value } })
        const json: any = res?.data ?? { data: [] }
        const dataBlock = json?.data ?? json ?? []
        const list: any[] = Array.isArray(dataBlock) ? dataBlock : (Array.isArray(dataBlock?.data) ? dataBlock.data : [])
        const total = typeof dataBlock?.totalCount === 'number' ? dataBlock.totalCount : list.length

        const mapped: ExternalUnitRow[] = list.map((item: any, idx: number) => ({
            id: item.id ?? idx + 1,
            unitName: item.unitName ?? '',
            phoneNumber: item.phoneNumber ?? '',
            email: item.email ?? '',
            landlinePhone: item.landlinePhone ?? '',
            address: item.address ?? '',
            createdBy: item.createdBy ?? '',
            remarks: item.remarks ?? ''
        }))

        allRows.value = mapped
        serverTotal.value = Number(total)
    } catch (e) {
        console.error('获取外协单位列表失败', e)
        // 显示友好的错误提示
        alert('无法连接到服务器，请检查后端服务是否运行。\n\n如果您是开发者，请确保后端服务已启动在端口5049。')
        allRows.value = []
        serverTotal.value = 0
    }
}

// 组件挂载时获取数据
onMounted(fetchList)

// 分页相关状态
const currentPage = ref(1)    // 当前页码
const pageSize = ref(10)      // 每页显示条数
const serverTotal = ref(0)    // 服务端返回的总条数

/**
 * 根据查询条件过滤数据
 * 使用前端过滤，因为后端暂未提供筛选参数
 */
const filteredRows = computed(() => {
    return allRows.value.filter(r => {
        return (
            (!filters.unitName || r.unitName.includes(filters.unitName)) &&
            (!filters.phoneNumber || r.phoneNumber.includes(filters.phoneNumber)) &&
            (!filters.createdBy || r.createdBy.includes(filters.createdBy)) &&
            (!filters.address || r.address.includes(filters.address))
        )
    })
})

// 总数据条数（服务端）
const total = computed(() => serverTotal.value || filteredRows.value.length)

/**
 * 当前页显示的数据行
 * 根据分页参数截取过滤后的数据
 */
const pageRows = computed(() => filteredRows.value)

// 选中的行ID数组
const selectedIds = ref<number[]>([])
// 是否全选状态
const isAllChecked = computed(() => pageRows.value.length > 0 && pageRows.value.every(r => selectedIds.value.includes(r.id)))

/**
 * 全选/取消全选功能
 * 切换当前页所有行的选中状态
 */
function toggleSelectAll(ev: Event) {
    const checked = (ev.target as HTMLInputElement).checked
    if (checked) {
        // 选中当前页所有行
        const ids = pageRows.value.map(r => r.id)
        selectedIds.value = Array.from(new Set([...selectedIds.value, ...ids]))
    } else {
        // 取消选中当前页所有行
        const pageSet = new Set(pageRows.value.map(r => r.id))
        selectedIds.value = selectedIds.value.filter(id => !pageSet.has(id))
    }
}

/**
 * 切换单行选中状态
 * @param id 行ID
 * @param ev 复选框事件
 */
function toggleRow(id: number, ev: Event) {
    const checked = (ev.target as HTMLInputElement).checked
    if (checked) {
        // 添加到选中列表
        if (!selectedIds.value.includes(id)) selectedIds.value.push(id)
    } else {
        // 从选中列表移除
        selectedIds.value = selectedIds.value.filter(x => x !== id)
    }
}

/**
 * 执行查询操作
 * 目前后端未提供筛选参数，这里只是重置到第一页
 */
function query() {
    filters.unitName = inputFilters.unitName.trim()
    filters.phoneNumber = inputFilters.phoneNumber.trim()
    filters.createdBy = inputFilters.createdBy.trim()
    filters.address = inputFilters.address.trim()
    currentPage.value = 1
}

/**
 * 重置查询条件
 * 清空所有过滤条件并重新查询
 */
function reset() {
    inputFilters.unitName = ''
    inputFilters.phoneNumber = ''
    inputFilters.createdBy = ''
    inputFilters.address = ''
    filters.unitName = ''
    filters.phoneNumber = ''
    filters.createdBy = ''
    filters.address = ''
    currentPage.value = 1
}

/**
 * 跳转到新增页面
 * 导航到外协单位新增页面
 */
function addNew() {
    router.push('/AddExternalCooperationUnits')
}

/**
 * 批量删除选中行
 * 删除所有选中的数据行
 */
function batchDelete() {
    if (selectedIds.value.length === 0) return
    if (!confirm(`确认批量删除选中的 ${selectedIds.value.length} 条记录吗？`)) return

    const payload = {
        ids: selectedIds.value,
        deletedBy: localStorage.getItem('username') || 'system'
    }

    write.post('baseinfowrite/api/External/BatchDeleteExternal', payload).then(({ data, status }) => {
        if (status === 200 && (data?.code === 200 || data?.data === true)) {
            const set = new Set(selectedIds.value)
            allRows.value = allRows.value.filter(r => !set.has(r.id))
            serverTotal.value = Math.max(0, (serverTotal.value || 0) - set.size)
            selectedIds.value = []
        } else {
            console.error('批量删除失败', data)
        }
    }).catch(err => { console.error('批量删除接口异常', err) })
}

/**
 * 编辑单行数据
 * 目前只是显示提示，实际功能待实现
 * @param row 要编辑的行数据
 */
function editRow(row: ExternalUnitRow) {
    router.push({
        path: '/UpdateExternalCooperationUnits',
        query: { id: String(row.id) }
    })
}

/**
 * 删除单行数据
 * 确认后删除指定行
 * @param row 要删除的行数据
 */
function deleteRow(row: ExternalUnitRow) {
    if (!confirm(`确认删除【${row.unitName}】吗？`)) return

    // 按要求改为 POST 方式，携带 id 与默认删除人“张三”
    write.post('baseinfowrite/api/External/DeleteExternalInfo', { id: row.id, deletedBy: '张三' })
        .then(async ({ data, status }) => {
            if (status === 200 && (data?.code === 200 || data?.data === true)) {
                allRows.value = allRows.value.filter(r => r.id !== row.id)
                selectedIds.value = selectedIds.value.filter(id => id !== row.id)
                serverTotal.value = Math.max(0, (serverTotal.value || 0) - 1)
                alert('删除成功')
            } else {
                console.error('删除失败', data)
            }
        })
        .catch(err => { console.error('删除接口异常', err) })
}

/**
 * 查看单行数据详情
 * 目前只是显示提示，实际功能待实现
 * @param row 要查看的行数据
 */
function viewRow(row: ExternalUnitRow) {
    openDetail(row.id)
}

// 详情弹窗状态
const showDetail = ref(false)
const detailLoading = ref(false)
const detail = ref<any>(null)

async function openDetail(id: number) {
    showDetail.value = true
    detailLoading.value = true
    detail.value = null
    try {
        const res = await read.get('baseinforead/api/External/GetExternalByIdQuery/GetExternalById', { params: { id } })
        const json = res?.data ?? {}
        if (res?.status === 200 && json?.code === 200) {
            detail.value = json.data
        } else {
            detail.value = {
                error: json?.message || '查询失败',
                errorCode: json?.code || res?.status
            }
        }
    } catch (e) {
        console.error('获取外协单位详情失败:', e)
        detail.value = {
            error: '无法连接到服务器，请检查后端服务是否运行',
            errorCode: 'CONNECTION_ERROR',
            suggestion: '请联系系统管理员启动后端服务'
        }
    } finally {
        detailLoading.value = false
    }
}

function closeDetail() {
    showDetail.value = false
}

// 页码变化时重新拉取
import { watch } from 'vue'
watch([currentPage, pageSize], () => {
    fetchList()
})

// 从新增/编辑返回携带 refresh=1 时刷新一次并移除参数
if (new URLSearchParams(location.search).get('refresh') === '1') {
    query()
    const url = new URL(location.href)
    url.searchParams.delete('refresh')
    history.replaceState(null, '', url.toString())
}
</script>


<style scoped>
/* 页面主容器样式 */
.page {
    padding: 12px 16px 24px;
    font-size: 14px;
    color: #333;
}

/* 页面标题样式 */
.title {
    border-left: 3px solid #2d8cf0;
    padding-left: 8px;
    margin-bottom: 12px;
}

/* 工具栏容器样式 */
.toolbar {
    background: #fff;
    border: 1px solid #ebedf0;
    padding: 12px;
    border-radius: 4px;
}

/* 查询条件表单行样式 */
.form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

/* 表单标签样式 */
.form-row label {
    color: #666;
}

/* 表单输入框样式 */
.form-row input {
    width: 200px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
}

/* 操作按钮行样式 */
.btn-row {
    margin-top: 12px;
}

/* 按钮基础样式 */
button {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    border-radius: 4px;
    cursor: pointer;
}

/* 禁用状态按钮样式 */
button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 主要按钮样式（查询按钮） */
button.primary {
    background: #409eff;
    color: #fff;
    border-color: #409eff
}

/* 次要按钮样式（重置按钮） */
button.ghost {
    margin-left: 6px;
}

/* 成功按钮样式（新增按钮） */
button.success {
    background: #67c23a;
    color: #fff;
    border-color: #67c23a;
    margin-right: 6px
}

/* 危险按钮样式（删除按钮） */
button.danger {
    background: #f56c6c;
    color: #fff;
    border-color: #f56c6c
}

/* 表格容器样式 */
.table-wrap {
    margin-top: 12px;
    background: #fff;
    border: 1px solid #ebedf0;
    border-radius: 4px;
}

/* 表格基础样式 */
.table {
    width: 100%;
    border-collapse: collapse;
}

/* 表格单元格样式 */
.table th,
.table td {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 8px;
    text-align: left;
}

/* 表头样式 */
.table thead th {
    background: #fafafa;
    color: #555;
    font-weight: 600;
}

/* 操作列链接样式 */
.table td.op a {
    color: #409eff;
    text-decoration: none;
}

/* 操作列分隔符样式 */
.table td.op .sep {
    color: #999;
    margin: 0 6px;
}

/* 空数据提示样式 */
.table td.empty {
    text-align: center;
    color: #999;
}

/* 分页器样式 */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    color: #666;
}

/* 分页器强调文字样式 */
.pager .strong {
    color: #f56c6c
}

/* 分页按钮样式 */
.pager-right button {
    margin-left: 6px;
    min-width: 32px;
}

/* 当前页按钮样式 */
.pager-right button.active {
    background: #409eff;
    color: #fff;
    border-color: #409eff
}

/* 弹窗样式 */
.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal {
    width: 560px;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f7f8fa;
    border-bottom: 1px solid #ebeef5;
}

.modal-close {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

.modal-body {
    padding: 12px 14px;
}

.detail-row {
    margin-bottom: 8px;
    display: flex;
}

.detail-row .label {
    width: 100px;
    color: #666;
}

.modal-footer {
    padding: 10px 14px;
    text-align: right;
    border-top: 1px solid #ebeef5;
}

/* 错误显示样式 */
.error-container {
    text-align: center;
    padding: 20px;
}

.error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.error-title {
    font-size: 18px;
    font-weight: 600;
    color: #f56c6c;
    margin-bottom: 12px;
}

.error-message {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.5;
}

.error-code {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    font-family: monospace;
}

.error-suggestion {
    font-size: 12px;
    color: #409eff;
    background: #f0f9ff;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #409eff;
    margin-top: 12px;
}

.loading {
    text-align: center;
    padding: 20px;
    color: #666;
}
</style>
